<template>
  <div id="app">
    <el-row style="overflow: auto; text-align: center;">
      <el-button type="primary" @click="dialogFormVisible = true" style="margin-bottom: 10px;">添加分类</el-button>
      <el-table
          :data="types"
          style="margin-bottom: 20px;"
          :row-class-name="tableRowClassName">
        <el-table-column
            prop="id"
            width="150px"
            label="id">
        </el-table-column>
        <el-table-column
            prop="name"
            width="230px"
            label="类别名称">
        </el-table-column>
        <el-table-column
            prop="sort"
            width="150px"
            label="排序">
        </el-table-column>
        <el-table-column
            prop="status"
            width="150px"
            label="是否上架">
        </el-table-column>
        <el-table-column label="操作" >
          <template slot-scope="scope">
            <el-button
                size="small"
                type="danger"
                @click="handleDelete(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>


    <el-dialog title="添加分类" :visible.sync="dialogFormVisible">
      <el-form :rules="specFormrules" :model="goodsType">
        <el-form-item label="名称" label-width="100px" prop="name">
          <el-input v-model="goodsType.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="ID" label-width="100px">
          <el-input-number v-model="goodsType.sort" :min="0" :max="100"></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addGoodsType">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      types: [],
      goodsType: {
        name: '',
        sort: 0,
      },
      dialogFormVisible: false,
      specFormrules: {
        spec: [
          { required: true, message: '请输入规格', trigger: 'blur' },
        ],
      }

    }
  },
  created() {
    // 分类请求
    this.getTypes()

  },
  methods: {
    // 添加分类
    async addGoodsType() {
      if (this.goodsType.name === '' || this.goodsType.sort === 0){
        window.alert("未添加内容");
        return
      }
      await this.$http.post("/admin/addType/",{
        name:this.goodsType.name,
        sort:this.goodsType.sort,
      }).then(res =>{
        console.log(res);
        this.dialogFormVisible = false
        this.getTypes();
        this.name = '';
        this.sort = 0;
      }).catch((e) =>{
        console.log(e);
      });
    },
    // 获取分类
    async getTypes() {
      await this.$http.post("/admin/typeList").then(res => {
        console.log(res)
        this.types = res.data.data;
      }).catch(err => {
        console.log("son3 getTypes err => ", e);
      })
    },
    // 删除分类
    async handleDelete(index){
      console.log(this.types[index].id)
      await this.$http.post("/admin/deleteType",{
        id:this.types[index].id,
      }).then(res =>{
        console.log(res)
        this.getTypes();
      }).catch(err =>{
        console.log("handleDelete err =>", err)
      })
      // this.foodForm.spec.splice(index, 1);
    },




    //自定义列模板
    tableRowClassName(row, index) {
      if (index === 1) {
        return 'info-row';
      } else if (index === 3) {
        return 'positive-row';
      }
      return '';
    },

    // 添加分类
    addspecs(){
      this.foodForm.spec.push({...this.specForm});
      this.specForm.specs = '名称';
      this.specForm.stock = 20;
      this.specForm.fee = 0;
      this.dialogFormVisible = false;
    },
  },
}
</script>

<style lang="less" scoped>
.el-button {
  margin:12px;
  box-shadow:  19px 19px 38px #d9d9d9,
    -19px -19px 38px #ffffff;
}

</style>
